---
import Default from '@astrojs/starlight/components/SiteTitle.astro';
import FrameworkSelector from "@/components/FrameworkSelector.vue";
import { getFrameworkFromUrl } from '@/utils/frameworkConfig';


const locales={
    es:{
        label:'Ejemplos'
    },
    en:{
        label:'Examples'
    }

}
const { label } = locales[Astro.props.locale=='es'?'es':'en']
const { currentLocale } = Astro;
const framework = getFrameworkFromUrl(Astro.url.pathname)
const baseUrl = currentLocale==='en'?`/${framework}/`:`/${currentLocale}/${framework}/`
---

<div class="flex flex-row items-center relative gap-6 max-sm:gap-2">
    <Default {...Astro.props}/>
    <div class="h-8 border-solid border-[0.5px] border-gray-900/30 dark:border-gray-300/20 max-sm:hidden" />
    <a href=`${baseUrl}example/vertical-list/single-vertical-list/` class="no-underline max-sm:hidden">
        <span class="text-2xl max-sm:text-base text-accent-600 dark:text-accent-200 font-semibold transition-colors">{label}</span>
    </a>
    <FrameworkSelector client:idle url={Astro.url.pathname}/>
</div>